<template>
	<div class="box">
		<div class="search-list">
			<el-button class="elBtn btn1" @click="dialogVisible = true">
				<img src="@img/main/user.png" />
				新增用户
			</el-button>
		</div>
		<div class="table-area">
			<el-table
				class="list-table"
				:data="tableData"
				:header-cell-style="{
					background: '#113659',
					fontWeight: 400,
					color: '#fff',
				}"
				:header-row-style="{ background: '#113659' }"
				:row-style="{ background: '#0a2641' }"
				:cell-style="{ background: '#0a2641', borderBottom: '1px solid #184168', color: '#fff' }"
			>
				<el-table-column label="序号">
					<template #default="{ $index }">
						<span>{{ $index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="用户名称"> </el-table-column>
				<el-table-column prop="nickName" label="用户昵称"> </el-table-column>
				<el-table-column prop="createTime" label="创建日期"> </el-table-column>
				<el-table-column prop="status" label="状态">
					<template #default="{ row }">
						<!-- status 0 启用 1 禁用-->
						<el-switch
							v-model="row.status"
							active-color="#0372CD"
							inactive-color="#244667"
							active-value="0"
							inactive-value="1"
							inline-prompt
							active-text="开"
							inactive-text="关"
							@change="changeStatus(row)"
						></el-switch>
					</template>
				</el-table-column>
				<!-- 操作 -->
				<el-table-column label="操作">
					<template #default="{ row }">
						<!-- <el-button type="primary" link @click="dealEdit(row)">编辑</el-button>
						<el-button type="primary" link @click="dealReset(row)">重置</el-button> -->
						<el-button type="primary" link @click="handleRemove(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog v-model="dialogVisible" title="新增用户" width="30%" :before-close="handleClose">
			<el-form label-width="100px">
				<el-form-item label="用户昵称" prop="nickName">
					<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
				</el-form-item>
				<el-form-item label="用户名称" prop="userName">
					<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
				</el-form-item>
				<el-form-item label="密码" prop="nickName">
					<el-input
						v-model="form.password"
						type="password"
						show-password
						placeholder="请输入密码"
						maxlength="30"
					/>
				</el-form-item>
				<el-form-item label="用户角色" prop="userName">
					<el-select v-model="form.status" placeholder="请选择用户角色">
						<el-option label="普通用户" value="0" />
						<el-option label="管理员" value="1" />
					</el-select>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="handleAdd">确定</el-button>
					<el-button @click="handleClose">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { getUserList, changeUserStatus, addUser, delUser } from "@/api/user";
import { UserInfo, AddUserParams } from "@/api/user/types";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData: Ref<UserInfo[]> = ref([]);
// 初始化角色列表
const initUserList = async () => {
	const res = await getUserList();
	tableData.value = res.rows;
	console.log(res);
};
onMounted(() => {
	initUserList();
});
const changeStatus = async (row: UserInfo) => {
	let text = row.status === "0" ? "启用" : "停用";
	ElMessageBox.confirm("确认要" + text + "该用户吗？", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			changeUserStatus(row.status, row.userId).then(() => {
				ElMessage.success(text + "成功");
			});
		})
		.catch(() => {
			row.status = row.status === "0" ? "1" : "0";
		});
};
// 新增或编辑用户 用户昵称、用户名称、密码、用户状态（选择框 0 、1）
const form: AddUserParams = reactive({
	nickName: "",
	userName: "",
	password: "123456",
	status: "0",
});
const dialogVisible = ref(false);
const handleClose = () => {
	// 初始化表单
	form.nickName = "";
	form.userName = "";
	form.password = "123456";
	form.status = "0";
	dialogVisible.value = false;
};
const handleAdd = async () => {
	await addUser({
		nickName: form.nickName,
		userName: form.userName,
		password: form.password,
		status: form.status,
	});
	ElMessage.success("新增用户成功");
	initUserList();
	handleClose();
};
const handleRemove = async (row: UserInfo) => {
	const userIds = row.userId;
	ElMessageBox.confirm("确认要删除该用户吗？", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(() => {
		delUser(userIds).then(() => {
			ElMessage.success("删除成功");
			initUserList();
		});
	});
};
// 删除
// const userIds = row.userId || this.ids;
//       this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
//         return delUser(userIds);
//       }).then(() => {
//         this.getList();
//         this.$modal.msgSuccess("删除成功");
//       }).catch(() => {});
</script>

<style lang="scss" scoped>
.search-list {
	margin-bottom: 24px;
}
.list-table {
	--el-table-border-color: none;
	height: 72vh;
	@apply w-full;
	color: #fff;
}
.btn1 {
	width: 123px;
	height: 36px;
	img {
		margin-right: 6px;
	}
}
</style>
